<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园点餐后台登陆</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        * { padding: 0px; margin: 0px; box-sizing: border-box; }
        body {
            font-family: Arial, Helvetica, sans-serif;
            background: url(../../images/canguan.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            font-size: 14px;
        }
        .layui-form-item label { font-weight: normal; }
        .layui-input, .layui-input-inline, .layui-textarea {
            width: 100%;
            padding: 0 10px;
            border-radius: 4px;
        }
        .layui-form-item .layui-input {
            margin-bottom: 15px;
        }
        .layui-form-item .layui-input:focus,
        .layui-form-item .layui-textarea:focus {
            border-color: #1E9FFF;
        }
        .layui-form-item .layui-input-passwd {
            background-color: #f2f2f2;
        }
        .layui-form-item .layui-input-passwd:focus {
            background-color: #fff;
        }
        .layui-form-item .layui-input-error {
            border-color: #FF5722;
        }
        .layui-form-item .layui-input-error:focus {
            border-color: #FF5722;
        }
        .layui-form-item .layui-select {
            width: 100%;
            padding: 0 10px;
            border-radius: 4px;
        }
        .layui-form-item .layui-select:hover,
        .layui-form-item .layui-select:focus {
            border-color: #1E9FFF;
        }
        .layui-form-item .layui-select-option-checked {
            background-color: #1E9FFF;
            color: #fff;
        }
        .layui-form-item .layui-form-checkbox[lay-skin="primary"] span,
        .layui-form-item .layui-form-radio i {
            color: #1E9FFF;
        }
        .layui-form-item .layui-form-checkbox[lay-skin="primary"][lay-unchecked] span,
        .layui-form-item .layui-form-radio[lay-unchecked] i {
            color: #999;
        }
        .layui-form-mid .layui-word-aux {
            color: #FF5722;
        }
        .layui-btn {
            width: 100%;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-btn-primary {
            background-color: #1E9FFF;
            color: #fff;
        }
        .layui-btn-primary:hover {
            background-color: #00A5FF;
        }
        .layui-btn-danger {
            background-color: #FF5722;
            color: #fff;
        }
        .layui-btn-danger:hover {
            background-color: #FF7F50;
        }
        .toggle-btn {
            cursor: pointer;
            color: #1E9FFF;
            text-decoration: underline;
            font-size: 14px;
        }
        .toggle-btn:hover {
            color: #00A5FF;
        }
        .container {
            width: 400px;
            margin: 100px auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .xtname {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="loading"></div>
<p class="xtname">校园在线点餐系统</p>
<div class="container">
    <form id="login-form" class="layui-form" action="/login" method="POST">
        ${error}
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="login-name" lay-verify="required" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" id="login-password" lay-verify="required" placeholder="请输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="submit" class="layui-btn layui-btn-primary">登录</button>
        </div>
    </form>
    <form id="register-form" action="/config/register" method="post" class="layui-form" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">管理员</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="register-name" lay-verify="required" placeholder="请输入管理员名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">初始密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" id="register-password" lay-verify="required" placeholder="请输入初始密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <input type="text" name="address" id="address" lay-verify="required" placeholder="请输入地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" id="register-phone" lay-verify="required" placeholder="请输入联系方式" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="submit" class="layui-btn layui-btn-danger">注册</button>
        </div>
    </form>
    <div class="layui-form-item">
        <span class="toggle-btn" onclick="toggleForm()">注册/返回登录</span>
    </div>
</div>
<script>
    function toggleForm() {
        var loginForm = document.getElementById('login-form');
        var registerForm = document.getElementById('register-form');
        var registerButton = document.querySelector('.toggle-btn');

        if (loginForm.style.display === 'none') {
            loginForm.style.display = 'block';
            registerForm.style.display = 'none';
            registerButton.textContent = '注册';
        } else {
            loginForm.style.display = 'none';
            registerForm.style.display = 'block';
            registerButton.textContent = '返回登录';
        }
    }

    layui.use(['form'], function () {
        var form = layui.form;

        form.verify({
            username: function (value) {
                if (value === '') {
                    return '用户名不能为空';
                }
            },
            password: function (value) {
                if (value === '') {
                    return '密码不能为空';
                }
            },
            address: function (value) {
                if (value === '') {
                    return '地址不能为空';
                }
            },
            phone: function (value) {
                if (value === '') {
                    return '联系方式不能为空';
                }
            }
        });

        form.on('submit(login)', function (data) {
            return validateForm();
        });

        form.on('submit(register)', function (data) {
            return validateRegisterForm();
        });
    });
</script>
</body>
</html>